<template>
  <el-upload class="avatar-uploader" :accept="uploadType" :show-file-list="false"
    :headers="{'Authorization':'Bearer ' + tokenUpload}" :action="uploadUrl" :on-success="successUpload"
    :before-upload="beforeAvatarUpload">
    <img v-if="imageUrl" :src="imageUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>
<script>
  import {
    delDoc
  } from "@/api/kenuo/verison";
  import Cookies from "js-cookie";
  export default {
    props: ["imgUrl", "uploadType"],
    data() {
      return {
        imageUrl: this.imgUrl,
        tokenUpload: '',
        uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      };
    },
    created() {
      this.tokenUpload = Cookies.get('Admin-Token')
    },
    methods: {
      // handleAvatarSuccess(res, file) {
      //   this.imageUrl = URL.createObjectURL(file.raw);
      // },
      successUpload(response, file, fileList) {
        if (response.code == 200) {
          if (this.imageUrl) {
            this.delImg(this.imageUrl)
          }
          this.imageUrl = response.url
          this.$emit('operateImg', response.url)
          // this.fileList = [{
          //   name: response.originalFilename,
          //   url: response.url
          // }]
        } else if (response.code == 500) {
          this.$emit('operateImg', '')
          this.$message({
            message: response.msg,
            type: "error"
          });
        }
      },
      delImg(url) {
        delDoc({
          url: url
        }).then((res) => {
          if (res.code == 200) {
            console.log("删除成功")
          }
        });
      },
      beforeAvatarUpload(file) {
        //  console.log(file)

        //  const isLt2M = file.size / 1024 / 1024 < 2;
        //  if (!isLt2M) {
        //    this.$message.error('上传头像图片大小不能超过 2M!');
        //  }
        //  return  isLt2M;

        //进行图片类型和大小的限制
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isLt2M) {
           this.$message.error('封面图大小不能超过2M!请重新选择!');
          return false; //必须加上return false; 才能阻止
        }
        const isSize = new Promise(function(resolve, reject) {
          let width = 512;
           let height = 300;
          let _URL = window.URL || window.webkitURL;
          let img = new Image();
          img.onload = function() {
            let valid =
              img.width == width && (img.height == 512 || img.height == 300);
            valid ? resolve() : reject();
          };
          img.src = _URL.createObjectURL(file);
        }).then(
          () => {
            return file;
          },
          () => {
            this.$message({
              message: "封面图尺寸只能是512 * 300!请重新选择!",
              type: "warning",
            });
            return Promise.reject();
            return false; //必须加上return false; 才能阻止
          }
        );
        return isLt2M && isSize;
      }
    }
  }
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
  }

  .avatar {
    width: 60px;
    height: 60px;
    display: block;
  }
</style>
